<template>
	<view class="padd">
		<!-- 咨询师入驻个人信息 -->
		<view class="userInfo_rz hasFlex">
			<view class="zxsHeader">
				<image class="samePar" :src="zxsInfo.zjImg"></image>
			</view>
			<view class="userInfo">
				<view class="zxsName spaceBet">
					<view>{{ zxsInfo.userName }}</view>
					<view class="loc">{{zxsInfo.prov}}{{ zxsInfo.city }}</view>
				</view>
				<view class="zxsLevel hasFlex">
					<view class="comItem levelItem"
						v-for="(item,index) in toArrayFuns((zxsInfo.zsName || ''),',')"
						:key="index" 
					>{{item}}</view>
				</view>
				<view class="scLy hasFlex">
					<view class="comItem lyItem noMargR">擅长领域：</view>
					<view class="comItem lyItem"
						v-for="(item,index) in parScName"
						:key="index"
					>{{item}}</view>
				</view>
			</view>
		</view>
		<view class="cyExp">
			<view class="expItem">
				<view>从业年限</view>
				<view class="itemCon">{{calWrokRange(zxsInfo.workRange)}}</view>
			</view>
			<view class="expItem">
				<view>服务时长</view>
				<view class="itemCon">{{zxsInfo.serviceHours}}小时</view>
			</view>
			<view class="expItem">
				<view>服务人次</view>
				<view class="itemCon">{{zxsInfo.serviceTimes}}人</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			zxsInfo:Object,
			parScName:Array
		},
		computed:{
			calWrokRange(){
				return function(workRange){
					var tmpArr = workRange.split(',');
					if(tmpArr.length == 1){
						return workRange.split(',')[0] + '年'
					}else{
						return workRange.split(',')[0] + '年' + workRange.split(',')[1] + '个月';
					}
				}
			},
			toArrayFuns(){
				return function(str,splitQuote){
					var tmpArr = str.split(splitQuote);
					return tmpArr;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	$grayBg:#FAF9FE;
	.userInfo_rz{
		border: 1rpx solid $pss-color-blueDeep;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-top: 30rpx;
		background: $grayBg;
		--hei:38rpx;
		.zxsHeader{
			width: calc((var(--hei70) * 2) + 10rpx);
			height: calc(var(--hei100) * 2);
			border-radius: 10rpx;
			margin-right: 15rpx;
			flex-shrink: 0;
		}
		.userInfo{
			flex: 1;
		}
		.zxsName{
			font-size: 34rpx;
			color: $pss-text-color0;
			font-weight: 600;
			align-items: center;
			.loc{
				font-weight: normal;
				font-size: 24rpx;
				color: $pss-text-color8;
			}
		}
		.zxsLevel{
			margin:10rpx 0 10rpx 0;
			flex-wrap: wrap;
		}
		.scLy{
			flex-wrap: wrap;
		}
		.comItem{
			height: var(--hei);
			line-height: var(--hei);
			color: $pss-text-color6;
			margin-right: 30rpx;
			font-size: 26rpx;
		}
		.levelItem{
			font-size: 26rpx;
		}
		.noMargR{
			margin-right: 0;
		}
	}
	.cyExp{
		border-radius: 10rpx;
		padding: 20rpx;
		background: $grayBg;
		margin: 30rpx 0;
		.expItem{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60rpx;
			font-size: 28rpx;
			color: $pss-text-color0;
			margin-bottom: 20rpx;
			&:last-child{
				margin-bottom: 0rpx;
			}
			.itemCon{
				color: $pss-text-color6;
			}
		}
	}
</style>